<template>
  <div class="ui_login">
    <div class="login_header">
      <div class="login_header">
        <div class="login_header_close_btn">
          <a href="/" class="iconfont icon-guanbi"></a>
        </div>
        <div class="login_header_register_btn">
          <a href="/register" class="iconfont">注册</a>
        </div>
      </div>
    </div>
    <div class="login_content">
      <PasswordLogin @onChangeLoginMode="changeLoginMode" v-if="loginMode==='password'"></PasswordLogin>
      <SmsCodeLogin @onChangeLoginMode="changeLoginMode" v-if="loginMode==='smsCode'"></SmsCodeLogin>
    </div>
    <div class="login_footer">
      <div>手机如未注册将自动创建账户</div>
      <div class="login_footer_protocol">
        注册登录即代表您已同意
        <span class="login_footer_link" @click="goToUserProtocol">《XX协议》</span>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
  import PasswordLogin from '../../component/login/PasswordLogin';
  import SmsCodeLogin from '../../component/login/SmsCodeLogin';

  export default {
    name: 'LoginIndex',
    components: { PasswordLogin, SmsCodeLogin },
    data() {
      return {
        loginMode: 'smsCode' // true为密码登录，false为短信验证码登录
      };
    },
    methods: {
      changeLoginMode(mode) {
        this.loginMode = mode;
      },
      goToUserProtocol() {
        this.$router.push('/userprotocol');
      }
    }
  };
</script>

<style scoped lang="less">
  .ui_login {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    .login_header {
      flex: 0 0 auto;
      width: 100%;
      height: 417px;
      background: url("../../asset/images/bg@3x.png") no-repeat center center;
      background-size: 100% 100%;
      .login_header {
        display: flex;
        justify-content: space-between;
        padding: 30px;
        .iconfont {
          color: #fff;
          font-size: 36px;
        }
      }
    }
    .login_content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1 0 auto;
      width: 100%;
    }
    .login_footer {
      flex: 0 0 auto;
      width: 100%;
      padding: 30px 0;
      color: #999;
      font-size: 22px;
      text-align: center;
      .login_footer_protocol {
          margin-top: 5px;
        .login_footer_link {
          color: #4694ff;
        }
      }
    }
  }
</style>